import {FontIcon, Box, Static} from '../components'
import {compose, getStaticUrl} from '../util'
import {withState} from "recompose";
import {primaryColor} from '../styles/common-color'

const ModuleChild = ({title, hover, icon, onMouseOver, style}) => {

    return (
        <div className='module'
             onMouseOver={onMouseOver} style={style}>
            <Box width='32px' height='50px' style={{transform: hover && 'translateY(-20%)'}}>
                <FontIcon icon={icon} fontSize='2rem' color={hover ? primaryColor : '#9b9b9b'} style={{lineHeight: '1'}}/>
            </Box>
            <Static label={title} fontSize='.875rem' color={hover ? primaryColor : '#9b9b9b'}/>

            <style jsx>{`
            .module{
                width:16%;
                height:100%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding:.5rem 0;
                border-right:1px solid #ccc;
            }
        `}</style>
        </div>
    )
};

const Title = ({title, content}: { title: string, content: string }) => (
    <Box width='100%' height='100%' flex='flex' direction='column' padding='6%'>
        <Static label={title} fontSize='1.75rem' marginBottom='2rem'/>
        <Static label={content} fontSize='.875rem'/>
    </Box>
);

const moduleData = [
    {title: '职位需求', icon: 'ziyuan'},
    {title: '职位共享', icon: 'icon-test2'},
    {title: '渠道需求', icon: 'icon-test1'},
    {title: '渠道共享', icon: '06'},
    {title: '简历管理', icon: 'shujuyunfenxi'},
];

const Module = ({setState, state: {mouse}}: { setState: Function, state: { mouse: number } }) => {

    return (
        <Box width='100%' bgColor='#fff' padding='4%' flex='flex' direction='column'
             justify='flex-start'>
            <Box bgColor='#fff' width='80%' height='5rem' flex='flex' style={{borderRadius: '2.5rem'}}
                 padding='1.5rem 0' shadow='0 0 8px rgba(2, 15, 70, 0.15)' marginBottom='3rem'
            >
                {
                    moduleData.map((data, index) => {
                        return (
                            <ModuleChild key={index} hover={mouse == index} title={data.title} icon={data.icon}
                                         onMouseOver={() => setState({mouse: index})}/>
                        )
                    })
                }

                <ModuleChild key='m' title='简历共享' icon='icon29' style={{border: 'none'}}
                             onMouseOver={() => setState({mouse: 5})} hover={mouse == 5}/>

            </Box>
            <Box height='32rem' width='100%' flex='flex' direction='row'>
                <Box width='70%' height='100%'>
                    {mouse == 0 && <img src={getStaticUrl("/static/img/option01.png")} alt="" width='100%'/>}
                    {mouse == 1 && <img src={getStaticUrl("/static/img/option02.png")} alt="" width='100%'/>}
                    {mouse == 2 && <img src={getStaticUrl("/static/img/option01.png")} alt="" width='100%'/>}
                    {mouse == 3 && <img src={getStaticUrl("/static/img/option02.png")} alt="" width='100%'/>}
                    {mouse == 4 && <img src={getStaticUrl("/static/img/option01.png")} alt="" width='100%'/>}
                    {mouse == 5 && <img src={getStaticUrl("/static/img/option02.png")} alt="" width='100%'/>}
                </Box>

                <Box width='30%' heigth='100%'>
                    {mouse == 0 && <Title title='职位需求' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                    {mouse == 1 && <Title title='职位共享' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                    {mouse == 2 && <Title title='渠道需求' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                    {mouse == 3 && <Title title='渠道共享' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                    {mouse == 4 && <Title title='简历管理' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                    {mouse == 5 && <Title title='简历共享' content='在招聘方面共享资源打破了传统的招聘方式，也打破根深蒂固的理念'/>}
                </Box>
            </Box>
        </Box>
    )
};

export default compose(
    withState('state', 'setState', {
        mouse: 0,
    })
)(Module)